<template>
	<!-- 用户评论 -->
	<div class="Usercomment">
		<div class="commentTitle">用户评论</div>
		<div v-if="CommentList?.comments.length">
			<!-- 评论列表 -->
			<div class="Comment-list" ref="divref">
				<van-row
					v-for="item in CommentList?.comments"
					:key="item.id"
					class="single">
					<van-col span="3">
						<van-image
							round
							width="35"
							height="35"
							:src="imageUrl + item.smallHeader"></van-image>
					</van-col>
					<van-col span="21">
						<div class="userName">{{ item.nickname }}</div>
						<div class="userDesc" v-html="item.content"></div>
						<div class="commotBottom">
							<div>
								<span class="reply">回复</span>
								<span>{{ date(item.createdAt) }}</span>
							</div>
							<div>
								<span>{{ item.likes }}</span>
								<van-icon name="good-job-o" />
							</div>
						</div>
					</van-col>
				</van-row>
			</div>

			<!-- 查看更多 -->
			<div class="moreComment" @click="seeMore">查看更多评论</div>
		</div>
		<div v-else>暂时没有评论</div>
	</div>
</template>

<script setup lang="ts">
	import type { commentDataModel } from "@/api/CourseDetail";
	import { ref } from "vue";
	import moment from "moment";
	let imageUrl = "https://imagev2.xmcdn.com/";
	let date = (time: number) => {
		return moment(time).format("YYYY-MM-DD");
	};
	let divref = ref();
	let seeMore = (e: any) => {
		divref.value.style.height = "auto";
		e.currentTarget.style.display = "none";
	};

	defineProps<{
		CommentList: commentDataModel | undefined;
	}>();
</script>

<style lang="less" scoped>
	// 用户评论
	.Usercomment {
		padding: 15px;
		margin-bottom: 10px;
		.commentTitle {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 20px;
		}
		.Comment-list {
			height: 200px;
			overflow: hidden;
			.single {
				margin-bottom: 20px;
			}

			.userName {
				font-size: 14px;
				color: #666;
				margin-bottom: 4px;
			}
			.userDesc {
				font-size: 14px;
				color: #333;
				line-height: 23px;
			}
		}

		.commotBottom {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			font-size: 12px;
			color: #999;
			.reply {
				color: #666;
				display: inline-block;
				margin-right: 2px;
			}
		}
		.moreComment {
			margin: 0 50px;
			padding-bottom: 10px;
			font-size: 14px;
			color: #fe7959;
			text-align: center;
		}
	}
</style>
